<template>
  <el-scrollbar height="780px">
    <div class="patientCard">
      <div class="operation-info" v-for="item in patienList" :key="item.id">
        <div class="operation-content">
          <div class="pat-info">
            <img src="@/assets/home/avtar.png" alt="" class="avtar" />
            <span class="name">{{ item.name }}</span>
            <span>{{ item.sex == "1" ? "男" : "女" }}</span>
            <span>{{ item.age }}</span>
            <span>Ⅱ级</span>
          </div>
          <div class="operation">
            <span>{{ item.diagnose }}</span>
          </div>
          <div class="footer">
            <div class="expect">
              {{ item.office }}-主治医生 : {{ item.attendingPhysician }}
            </div>
            <div class="btn" @click="onApplyfor(item)">申请会诊</div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import subTitle from "@/components/Title/subtTitle.vue";
import { useRouter } from "vue-router";
import { patient } from "@/api/index.js";

const router = useRouter();
// 患者列表

const patienList = ref([
  {
    id: "1",
    name: "张三",
    sex: "1",
    age: "66",
    rank: "Ⅱ级",
    diagnose:
      "患者长期高血糖控制不佳，导致严重的视网膜病变和肾脏功能逐渐衰竭，需加强治疗。",
    office: "内分泌科",
    attendingPhysician: "汪伟",
  },
  {
    id: "2",
    name: "李四",
    sex: "1",
    age: "72",
    rank: "Ⅰ级",
    diagnose:
      "患者有高血压病史20年，近期出现胸痛和气促症状，怀疑为心脏缺血性疾病，需进一步检查。",
    office: "心血管内科",
    attendingPhysician: "刘医生",
  },
  {
    id: "3",
    name: "王伟",
    sex: "1",
    age: "58",
    rank: "Ⅲ级",
    diagnose:
      "患者患有2型糖尿病多年，未能有效控制血糖，导致并发症如神经病变和肾脏损伤。",
    office: "内分泌科",
    attendingPhysician: "张医生",
  },
  {
    id: "4",
    name: "赵丽",
    sex: "0",
    age: "48",
    rank: "Ⅱ级",
    diagnose:
      "患者长期吸烟，导致肺功能逐渐减退，现出现反复咳嗽和咳痰症状，考虑慢性支气管炎。",
    office: "呼吸科",
    attendingPhysician: "王医生",
  },
  {
    id: "5",
    name: "钱婷",
    sex: "0",
    age: "60",
    rank: "Ⅳ级",
    diagnose:
      "患者长期肝病史，现出现腹水、黄疸等症状，可能是由肝硬化引起，需尽早干预。",
    office: "消化科",
    attendingPhysician: "李主任",
  },
  {
    id: "6",
    name: "孙杰",
    sex: "1",
    age: "55",
    rank: "Ⅰ级",
    diagnose:
      "患者近期出现胸闷、心悸症状，已知有冠心病病史，建议进行心脏超声检查和血管造影。",
    office: "心血管内科",
    attendingPhysician: "林医生",
  },
  {
    id: "7",
    name: "周燕",
    sex: "0",
    age: "70",
    rank: "Ⅱ级",
    diagnose:
      "患者脑卒中后康复情况不佳，存在肢体功能障碍和认知功能下降，需加强康复治疗。",
    office: "神经内科",
    attendingPhysician: "杨医生",
  },
  {
    id: "8",
    name: "吴刚",
    sex: "1",
    age: "65",
    rank: "Ⅱ级",
    diagnose:
      "患者因长期负重作业，导致腰椎间盘突出，现出现剧烈腰痛及腿部放射痛，需手术治疗。",
    office: "骨科",
    attendingPhysician: "陈主任",
  },
  {
    id: "9",
    name: "郑爽",
    sex: "0",
    age: "53",
    rank: "Ⅲ级",
    diagnose:
      "患者发现乳腺肿块伴随皮肤凹陷，怀疑乳腺癌，需进一步行乳腺超声及活检确认病理诊断。",
    office: "肿瘤科",
    attendingPhysician: "黄医生",
  },
  {
    id: "10",
    name: "冯明",
    sex: "1",
    age: "63",
    rank: "Ⅳ级",
    diagnose:
      "患者已有慢性肾病史，现出现尿量减少和水肿，怀疑为终末期肾病，需进行透析治疗。",
    office: "肾内科",
    attendingPhysician: "刘主任",
  },
  {
    id: "11",
    name: "陈莉",
    sex: "0",
    age: "58",
    rank: "Ⅱ级",
    diagnose:
      "患者有胃癌家族史，最近胃部疼痛和消化不良症状加重，建议进行胃镜检查和病理活检。",
    office: "消化科",
    attendingPhysician: "王医生",
  },
  {
    id: "12",
    name: "刘晨",
    sex: "1",
    age: "50",
    rank: "Ⅰ级",
    diagnose:
      "患者有糖尿病历史，平时血糖控制较差，出现视力模糊和多尿等症状，需调整药物方案。",
    office: "内分泌科",
    attendingPhysician: "张主任",
  },
  {
    id: "13",
    name: "林雪",
    sex: "0",
    age: "68",
    rank: "Ⅱ级",
    diagnose:
      "患者长期高血糖未得到有效控制，导致眼底病变及早期视网膜病变，需眼科联合治疗。",
    office: "内分泌科",
    attendingPhysician: "高医生",
  },
  {
    id: "14",
    name: "高鹏",
    sex: "1",
    age: "45",
    rank: "Ⅳ级",
    diagnose:
      "患者有长期吸烟史，现出现持续性咳嗽和痰中带血，考虑为肺癌可能，建议尽快进行CT扫描。",
    office: "肿瘤科",
    attendingPhysician: "吴医生",
  },
  {
    id: "15",
    name: "马敏",
    sex: "0",
    age: "62",
    rank: "Ⅱ级",
    diagnose:
      "患者右膝关节疼痛明显，活动受限，考虑为骨关节炎，需进行关节功能评估和物理治疗。",
    office: "骨科",
    attendingPhysician: "陈医生",
  },
  {
    id: "16",
    name: "邓超",
    sex: "1",
    age: "49",
    rank: "Ⅰ级",
    diagnose:
      "患者有长期高血压史，最近出现头晕和胸闷症状，怀疑心脏病加重，建议做心电图检查。",
    office: "心血管内科",
    attendingPhysician: "孙医生",
  },
  {
    id: "17",
    name: "蔡静",
    sex: "0",
    age: "55",
    rank: "Ⅲ级",
    diagnose:
      "患者出现反复出血症状，血常规检查发现白细胞显著增高，怀疑为白血病，建议做骨髓穿刺。",
    office: "血液科",
    attendingPhysician: "冯医生",
  },
  {
    id: "18",
    name: "潘晓",
    sex: "1",
    age: "59",
    rank: "Ⅱ级",
    diagnose:
      "患者有长期吸烟史，最近出现咳嗽加重并伴随胸痛，考虑为慢性支气管炎或肺气肿。",
    office: "呼吸科",
    attendingPhysician: "李主任",
  },
  {
    id: "19",
    name: "段萍",
    sex: "0",
    age: "61",
    rank: "Ⅳ级",
    diagnose:
      "患者乳腺肿块增大，伴有淋巴结肿大，怀疑为乳腺癌转移，建议尽早进行影像学检查。",
    office: "肿瘤科",
    attendingPhysician: "周医生",
  },
  {
    id: "20",
    name: "陈涛",
    sex: "1",
    age: "53",
    rank: "Ⅱ级",
    diagnose:
      "患者近期发现尿频、尿急和腰部不适，怀疑为前列腺炎或前列腺癌，建议进行前列腺检查。",
    office: "泌尿外科",
    attendingPhysician: "赵医生",
  },
  {
    id: "21",
    name: "李佳",
    sex: "0",
    age: "48",
    rank: "Ⅰ级",
    diagnose:
      "患者长期情绪不稳定，现出现失眠、焦虑症状，诊断为轻度抑郁症，建议心理治疗和药物治疗。",
    office: "心理科",
    attendingPhysician: "杨医生",
  },
]);

const patientCard = reactive({
  name: "111",
  age: 18,
  addr: {},
});
const onApplyfor = (item, index) => {
  router.push({
    path: "/consultationApplyfor",
    query: item,
  });
};
onMounted(() => {
  patient(patientCard).then((res) => {
    console.log(res, "res");
  });
});
</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 15px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(214, 227, 226, 0.12) 1.24%,
    rgba(233, 226, 226, 0.278) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(235, 229, 229, 0.1) 55.65%,
    rgba(226, 233, 232, 0.2) 94.34%
  );
}

@mixin bg1() {
  padding: 5px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(0, 0, 0, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(56, 189, 176, 0.2) 94.34%
  );
}

@mixin bg2() {
  padding: 5px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(9, 224, 202, 0.298) 1.24%,
    rgba(132, 230, 234, 0.765) 64.01%
  );
  border-image-source: linear-gradient(
    130.78deg,
    rgba(9, 224, 202, 0.793) 1.24%,
    rgba(67, 213, 198, 0.397) 94.34%
  );
}
.patientCard {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 默认每行 2 个元素 */
  gap: 10px;
  .operation-info {
    @include bg();
    .operation-content {
      .pat-info {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .name {
          color: #fff;
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 100% */
        }
        .avtar {
        }
        span {
          color: #fff;
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
        }
      }
      .operation {
        display: flex;
        align-items: center;
        margin-left: 20px;
        margin-top: 15px;
        height: 100px;
        .ssmc {
          color: var(--Gray-Gray5, #c5c5c5);
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          margin-right: 10px;
          line-height: 20px; /* 142.857% */
          font-size: 18px;
        }
        span {
          color: #fff;
          font-family: "Microsoft YaHei";
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
        }
      }
      .footer {
        margin-left: 15px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .expect {
          color: #fff;
          font-size: 13px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
          @include bg1();
        }
        .btn {
          @include bg2();
          color: #fff;
          font-size: 12px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
          cursor: pointer;
        }
      }
    }
  }
}
</style>
